<template>
  <div id="Dest">
    <!--    头订单明细-->
    <div id="HaveHead">
      <van-icon name="arrow-left" size="30" @click="toOrderList"/>
      <span>订单明细</span>
    </div>
    <!--    高得地图-->
    <div id="container">
    </div>
    <!--    订单详情-->
    <div class="HaveHead1">
      <span style="font-size: 20px">行程结束</span><br>
      <span style="font-size: 10px">订单编号：{{ this.Order.orderInformation.orderId }}</span>
      &emsp;
      <van-icon name="link-o" @click="copyValue($event)"/>
      <br>
      <span style="font-size: 10px">到达时间：{{ this.Order.orderTime.destinationTime }}</span><br>
      <span style="font-size: 10px">出发点：{{ this.Order.orderInformation.startingPointAddress }}</span><br>
      <span style="font-size: 10px">目的地：{{ this.Order.orderInformation.destinationAddress }}</span>
    </div>
    <!--    司机详情及价格-->
    <div class="HaveHead2">
      <div class="HaveHead22">
        <van-image
            round
            width="5rem"
            height="5rem"
            :src="this.Driver.driverAttribute.driverImgurl"/>
      </div>
      <div class="HaveHead222">
        <big><b>{{ this.Driver.carAttribute.carNumber }}</b></big><br>
        <span
            style="color: #9395A7">{{
            this.Driver.baseCarTypeManage.vehicleModel
          }} | {{ this.Driver.baseCarTypeManage.carManufactor }}</span><br><br>
        <span style="color: #9395A7">{{ this.Driver.driverAttribute.driverName }}</span>&emsp;
        <van-rate readonly v-model="this.Driver.driverAttribute.driverPoint" :size="15" color="red" void-icon="star"
                  void-color="#eee"/>&ensp;
        <span style="color: red;font-size: 15px">{{ this.Driver.driverAttribute.driverPoint }}.0分</span>
      </div>
      <div class="HaveHead2222">
        <span style="color: red;margin-left: 15%;font-size: 50px">￥{{ this.Order.orderCost.passengerTotal }}</span>
        <span style="color: deepskyblue;margin-left: 10px;font-size: 10px">明细></span>
      </div>
    </div>
    <!--    尾部支付-->
    <div class="HaveHead3">
      <van-button type="default" style="width: 250px" color="#4EA9CB" @click="toPaid">支付</van-button>
    </div>
    <van-popup v-model="show" position="bottom" style="height: 20%;width: 100%">
      <van-cell-group>
        <van-radio-group v-model="selectedPayMethod">
          <van-cell title="支付宝支付" clickable @click="selectPayMethod('alipay')">
            <template #right-icon>
              <van-radio name="alipay"/>
            </template>
          </van-cell>
          <van-cell title="微信支付" clickable @click="selectPayMethod('wechat')">
            <template #right-icon>
              <van-radio name="wechat"/>
            </template>
          </van-cell>
        </van-radio-group>
      </van-cell-group>
      <van-goods-action-button
          type="danger"
          text="立即支付"
          style="width: 90%"
          @click="onClickButton"
      />
    </van-popup>
  </div>
</template>


<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {findOrderById, findDriveById} from "@/api/order/orderList";
import handleCopy from '@/utils/clipboard'

export default {
  // mounted() {
  //   this.initAMap();
  // },
  unmounted() {
    this.map?.destroy();
  },
  data() {
    return {
      value: 5,
      //订单ID
      orderId: this.$route.query.orderId,
      //司机ID
      driverId: this.$route.query.driverId,
      Order: {
        orderCost: {},
        orderInformation: {},
        orderTime: {},
      },
      //出发点经度
      startingLongitude: '',
      //出发点纬度
      startingLatitude: '',
      //目的地经度
      destinationLongitude: '',
      //目的地纬度
      destinationLatitude: '',
      //司机信息
      Driver: {
        carAttribute: {},
        driverAttribute: {},
        baseCarTypeManage: {}
      },
      show: false,
      selectedPayMethod: '',
    }
  },
  created() {
    //查找某个订单信息
    findOrderById(this.orderId).then(res => {
      this.Order = res.data
      this.startingLongitude = this.Order.orderInformation.startingPoint.split(',')[0]
      this.startingLatitude = this.Order.orderInformation.startingPoint.split(',')[1]
      this.destinationLongitude = this.Order.orderInformation.destination.split(',')[0]
      this.destinationLatitude = this.Order.orderInformation.destination.split(',')[1]
      this.initAMap();
    })
    //查找司机信息
    findDriveById(this.driverId).then(res => {
      this.Driver = res.data
    })
  },
  methods: {
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "9708bfa416d306b9dbaf55ea4e4a25f2",
      };
      AMapLoader.load({
        key: "e6effe38515227141202b9fb6749424e", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
          .then((AMap) => {
            const map = new AMap.Map("container", {
              // 设置地图容器id
              viewMode: "3D", // 是否为3D地图模式
              zoom: 11, // 初始化地图级别
              center: [116.397428, 39.90923], // 初始化地图中心点位置
            });

            // 保存 Vue 实例的引用
            const vm = this;
            AMap.plugin("AMap.DragRoute", function () {
              //path 是驾车导航的起、途径和终点，最多支持16个途经点
              var path = [];
              path.push([vm.startingLongitude, vm.startingLatitude]);
              path.push([vm.destinationLongitude, vm.destinationLatitude]);
              var route = new AMap.DragRoute(map, path, 0);
              //查询导航路径并开启拖拽导航
              route.search();
            });
          })
    },
    toOrderList() {
      this.$router.push('/orderList')
    },
    //弹出支付选择支付方式
    toPaid() {
      this.selectedPayMethod = ''
      this.show = true
    },
    //点击复制
    copyValue(e) {
      let value = this.Order.orderInformation.orderId  //这里设置你要复制的文本信息，可以是text，也可以从e中获取，也可以自定义
      handleCopy(value, e, () => {
        console.log("这是复制成功回调函数")
        this.$toast('复制成功')
      }, () => {
        this.$toast('复制失败')
      })
    },
    selectPayMethod(method) {
      this.selectedPayMethod = method
    },
    onClickButton() {
      if (this.selectedPayMethod === 'alipay') {
        window.open("http://localhost:8081/alipay/pay/payMoney?orderId=" + this.orderId)
      } else if (this.selectedPayMethod === 'wechat') {
        console.log('微信支付')
      }
    }
  }
}
</script>


<style>
#Dest {
  width: 100%;
  height: 100vh;
  background: #F3FCFF;;
}

#HaveHead {
  width: 100%;
  height: 50px;
  background: white;
}

#HaveHead .van-icon {
  margin-top: 10px;
  margin-left: 20px;
}

#HaveHead span {
  font-size: 20px;
  margin-left: 30%;
  margin-top: 5px;
}

#container {
  width: 100%;
  height: 800px;
}

.HaveHead1 {
  margin-top: 10px;
  margin-left: 5%;
  width: 95%;
  height: 130px;
  line-height: 22px;
}

.HaveHead2 {
  width: 95%;
  margin-left: 5%;
  height: 300px;
}

.HaveHead22 {
  vertical-align: top; /* 从顶部对齐 */
  display: inline-block;
}

.HaveHead222 {
  width: 75%;
  display: inline-block;
  margin-top: 10px;
  margin-left: 10px;
}

.HaveHead2222 {
  margin-top: 20px;
  width: 100%;
  height: 80px;
}

.HaveHead3 {
  width: 100%;
  height: 60px;
}

.HaveHead3 .van-button {
  margin-top: 10px;
  margin-left: 10px;
  border-radius: 20px;
}
</style>